import styles from './index.less';
import { Table as TableX } from '@middle/ui';
// import { Table as TableX } from 'antd';

import { useEffect, useMemo, useState, useRef } from 'react';

export default function IndexPage() {

  const [Key, setSelectedRows] = useState<any[]>([]);

  const columns = [
    {
      title: '发运单号',
      dataIndex: 'doNo',
      inlineGroup: 'group1',
    },
    {
      title: '承运商名称',
      dataIndex: 'carrierName',
      inlineGroup: 'group2',
    },
    {
      title: '车型',
      dataIndex: 'etveType',
      inlineGroup: 'group2',
    },
    {
      title: '车牌号',
      dataIndex: 'etveCard',
      inlineGroup: 'group3',
    },
    {
      title: '司机',
      dataIndex: 'mainDriver',
      inlineGroup: 'group3',
    },
    {
      title: (
        <div>
          收货方编码 <br /> 收货方名称
        </div>
      ),
      dataIndex: 'consigneeCode',
      render: (text: string, record: any) => {
        const info = record.consigneeName?.split(';') || [];
        return record.consigneeCode
          ? record.consigneeCode
            .split(';')
            .map((item: string, index: number) => {
              return (
                <div key={item}>
                  <div>{item}</div>
                  <div>{info[index] ? info[index] : '--'}</div>
                </div>
              );
            })
          : '--';
      },
      width: 220,
    },
    {
      title: '调度确认时间',
      dataIndex: 'loadTime',
      inlineGroup: 'group5',
    },
    {
      title: '车辆抵达时间',
      dataIndex: 'receipteTime',
      inlineGroup: 'group5',
    },
    {
      title: '打印状态',
      dataIndex: 'printStatus',
      inlineGroup: 'group6',
      render: () => {
        return 1;
      },
    },
    {
      title: '已打印单据',
      dataIndex: 'printed',
      render: () => {
        return (
          <div>
            22
          </div>
        );
      },
    },
  ];

  console.log('selectedRows', Key);
  const rowSelection = {
    onChange: (keys: React.Key[], selectRows: any[]) => {
      setSelectedRows(keys);
    },
    // selectedRowKeys: Key,
  };

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      div岁半，随便更新点什么,222。
      <TableX
        className='table-scroll'
        virtual
        loading={false}
        columns={columns}
        dataSource={[{
          'doNo': 'DO2023110800000964',
          'etveCard': '域A99999',
          'etveType': '4.2米',
          'carrierCode': '20000981',
          'carrierName': '涟水华顺运输有限公司',
          'mainDriver': null,
          'consigneeCode': 'W0M301;W00601',
          'consigneeName': '永辉厦门食百物流常温仓;重庆食百物流中心W00601',
          'loadTime': '2023-11-08 15:52:51',
          'receipteTime': '2023-11-08 16:06:00',
          'printOutPf': false,
          'printOutTrip': false,
          'printConsumables': false,
          'printOutPfSum': false,
        }]}
        rowSelection={rowSelection}
        pagination={false}
      />
    </div>
  );
}
